<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram Redraw</title>
</head>
<body>

<canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000;"></canvas>

<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Style settings
ctx.lineWidth = 2;
ctx.font = "20px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.strokeStyle = "black";
ctx.fillStyle = "black";

// Coordinates and parameters
const origin = { x: 50, y: 150 };
const trackEnd = { x: 450, y: 150 };
const yAxisEnd = { x: 50, y: 50 };
const m_M_pos_x = 250;
const m_M_width = 60;
const m_M_height = 40;
const stringLength = 120;
const theta_deg = 25;
const theta_rad = theta_deg * Math.PI / 180;

// Helper function to draw an arrow
function drawArrow(ctx, fromx, fromy, tox, toy) {
    const headlen = 10;
    const dx = tox - fromx;
    const dy = toy - fromy;
    const angle = Math.atan2(dy, dx);
    ctx.beginPath();
    ctx.moveTo(fromx, fromy);
    ctx.lineTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
    ctx.stroke();
}

// Draw track AB
ctx.beginPath();
ctx.moveTo(origin.x, origin.y);
ctx.lineTo(trackEnd.x, origin.y);
ctx.stroke();

// Draw axes arrows
drawArrow(ctx, origin.x, origin.y, origin.x + 80, origin.y); // x-axis arrow
drawArrow(ctx, origin.x, origin.y, yAxisEnd.x, yAxisEnd.y); // y-axis arrow

// Labels for track and axes
ctx.fillText("A", origin.x - 15, origin.y + 15);
ctx.fillText("B", trackEnd.x, origin.y + 20);
ctx.fillText("x", origin.x + 80, origin.y - 15);
ctx.fillText("y", origin.x + 15, yAxisEnd.y - 10);

// Draw mass M
const m_M_top_left_x = m_M_pos_x - m_M_width / 2;
const m_M_top_left_y = origin.y - m_M_height;
ctx.fillStyle = "white";
ctx.fillRect(m_M_top_left_x, m_M_top_left_y, m_M_width, m_M_height);
ctx.strokeRect(m_M_top_left_x, m_M_top_left_y, m_M_width, m_M_height);
ctx.fillStyle = "black";
ctx.fillText("M", m_M_pos_x, origin.y - m_M_height / 2);

// String and mass m
const attachmentPoint = { x: m_M_pos_x, y: origin.y };
const m_m_pos = {
    x: attachmentPoint.x + stringLength * Math.sin(theta_rad),
    y: attachmentPoint.y + stringLength * Math.cos(theta_rad)
};
const m_m_radius = 8;

// Draw string
ctx.beginPath();
ctx.moveTo(attachmentPoint.x, attachmentPoint.y);
ctx.lineTo(m_m_pos.x, m_m_pos.y);
ctx.stroke();

// Draw mass m
ctx.beginPath();
ctx.arc(m_m_pos.x, m_m_pos.y, m_m_radius, 0, 2 * Math.PI);
ctx.fill();

// Labels for masses and string
ctx.fillText("m", m_m_pos.x + 20, m_m_pos.y);
const b_label_pos_x = attachmentPoint.x + (m_m_pos.x - attachmentPoint.x) * 0.5;
const b_label_pos_y = attachmentPoint.y + (m_m_pos.y - attachmentPoint.y) * 0.5;
ctx.fillText("b", b_label_pos_x + 20, b_label_pos_y);

// Angle markings
const intersection = { x: attachmentPoint.x, y: m_m_pos.y };
ctx.setLineDash([5, 5]);

// Vertical dashed line
ctx.beginPath();
ctx.moveTo(attachmentPoint.x, attachmentPoint.y);
ctx.lineTo(intersection.x, intersection.y);
ctx.stroke();

// Horizontal dashed line
ctx.beginPath();
ctx.moveTo(m_m_pos.x, m_m_pos.y);
ctx.lineTo(intersection.x, intersection.y);
ctx.stroke();

// The T-junction symbol at the intersection
ctx.setLineDash([]);
ctx.beginPath();
ctx.moveTo(intersection.x - 5, intersection.y);
ctx.lineTo(intersection.x + 5, intersection.y);
ctx.stroke();

// Angle arc and label
ctx.beginPath();
const arcRadius = 30;
ctx.arc(attachmentPoint.x, attachmentPoint.y, arcRadius, Math.PI / 2, Math.PI / 2 + theta_rad);
ctx.stroke();

const theta_label_radius = arcRadius + 15;
const theta_label_pos_x = attachmentPoint.x + theta_label_radius * Math.sin(theta_rad / 2);
const theta_label_pos_y = attachmentPoint.y + theta_label_radius * Math.cos(theta_rad / 2);
ctx.fillText("θ", theta_label_pos_x, theta_label_pos_y);

// Caption
ctx.font = "18px serif";
ctx.fillText("Fig. 2.24.", canvas.width / 2, canvas.height - 30);

</script>

</body>
</html>